<!DOCTYPE HTML>
<html>
  <title>Test Extension - Options Page</title>
  <script type="application/javascript">
    function getE(id) { return document.getElementById(id); };
    function set(key, str) { localStorage.setItem(key, str); };
    function get(key) { return localStorage.getItem(key) || key; };
    function onHover(id) { var e = getE(id); e.innerHTML = get(e.id);};
    function onReset(id) { var e = getE(id); e.innerHTML = e.id; };
    function onClick(id) { var e = getE(id); set(e.id, e.innerHTML + '1');
                           onHover(id);};
    function onDblClick(id) { var e = getE(id); set(e.id, e.id);
                              onHover(id); };
    function sendUpdate() {
        chrome.extension.sendRequest({'msg': 'options',
                                      'keys': ['div1', 'div2', 'div3']})};
  </script>
<head>
</head>

<body>
  <div id="div1" onclick="onClick('div1');" ondblclick="onDblClick('div1');"
       onmouseover="onHover('div1');" onmouseout="onReset('div1');">div1</div>
  <div id="div2" onclick="onClick('div2');" ondblclick="onDblClick('div2');"
       onmouseover="onHover('div2');" onmouseout="onReset('div2');">div2</div>
  <div id="div3" onclick="onClick('div3');" ondblclick="onDblClick('div3');"
       onmouseover="onHover('div3');" onmouseout="onReset('div3');">div3</div>
  <input type="button" onclick="sendUpdate();" value="Send Update">
</body>
</html>

